<template>
    <div>
        <el-button type="primary" @click="openForm('新增')" v-hasPermi="['beidaUserGroup:saveOrUpdate']">
            新增
        </el-button>
        <el-button type="primary" :disabled="groupNameId == ''" @click="openForm('编辑')" v-hasPermi="['beidaUserGroup:saveOrUpdate']">
            编辑
        </el-button>
        <el-button type="primary" :disabled="groupNameId == ''" @click="handleDelete()" v-hasPermi="['beidaUserGroup:delete']">
            删除
        </el-button>
        <el-divider />
        <el-space direction="vertical">
            <el-text v-for="item in groupList" style="cursor: pointer;" class="textStyle" :class="groupNameId == item.id ? 'active' : ''"
                truncated :key="item" @click="handleClick(item)">
                {{ item.groupName }}
            </el-text>
        </el-space>
    </div>
</template>

<script lang="ts" setup>
import * as userGroupApi from '@/api/infoArrive/arriveNotice/userGroup'

defineOptions({ name: 'Groups' })
const message = useMessage() // 消息弹窗
const { t } = useI18n() // 国际化
const groupList = ref<any>([])
const groupNameId = ref('')

/** 处理部门被点击 */
const handleClick = async (row: { [key: string]: any }) => {
    groupNameId.value = row.id
    emits('gruop-click', row)
}
const emits = defineEmits(['gruop-click', 'getId'])

/** 添加/修改操作 */
const groupFun:any = inject('groupFun')
const openForm = (type: string) => {
    groupFun(type,groupNameId.value)
}

/** 删除按钮操作 */
const handleDelete = async () => {
    try {
        // 删除的二次确认
        await message.delConfirm()
        // 发起删除
        await userGroupApi.deleteGroup([groupNameId.value])
        message.success(t('common.delSuccess'))
        // 刷新列表
        await getList()
    } catch { }
}

/** 获取用户组信息 */
const getList = async () => {
    const res = await userGroupApi.getGroup({groupType:'2'})
    groupList.value = res.list
    groupNameId.value = groupList.value ? groupList.value[0].id : ''
}

/** 监听deptName */
watch(groupNameId, (val) => {
    emits('getId', val)
}, { immediate: true })
/** 初始化 */
onMounted(async () => {
    await getList()
})
defineExpose({ getList }) 
</script>

<style lang="scss" scoped>
:deep(.el-space){
    width: 100%;
    .el-space__item{
        width: 100%;
        span{
            padding: 0 10px;
        }
    }
}

.active {
    color: #3560F6;
    background-color: #ecf5ff;
    background: rgba(53, 96, 246, 0.1);
    border-radius: 8px;
}
.textStyle{
    width: 100%;
    margin:0 10px;
    height: 40px;
    line-height: 40px;
    text-align: center;
}
</style>